<template>
  <div class="four-class-wrap" :style="`background-color:${bgColor}; margin-top: ${top}`">
    <van-tabs
      ref="outsideTabs"
      v-model="ids[0]"
      swipeable
      :title-active-color="titleActiveColor"
      :title-inactive-color="titleInactiveColor"
      :color="color"
      @click="handleClick"
    >
      <van-tab
        v-for="item in list"
        :key="item.id"
        :title="item.name"
        :name="item.value"
      >
        <template #title>
          {{ item.name }}
        </template>
      </van-tab>
    </van-tabs>
    <div class="icon-close">
      <van-icon v-show="showMore" name="cross" @click="showMore = !showMore" />
    </div>
    <van-popup
      v-model="showMore"
      position="top"
      :overlay="false"
      class="four-level-class-more-popup"
    >
      <div class="more-class-content">
        <component
          :is="componentName"
          v-model="ids"
          :data="moreData"
          :title-active-color="titleActiveColor"
          :title-inactive-color="titleInactiveColor"
          :color="color"
          @leafSubmit="leafSubmit"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import styleOne from './styleOne.vue'
import styleTwo from './styleTwo.vue'
import styleThree from './styleThree.vue'
import styleFour from './styleFour.vue'
import mixins from './../mixins'
import { Popup, Icon } from 'vant'
export default {
  name: 'FourLevelClassify',
  components: {
    styleOne,
    styleTwo,
    styleThree,
    styleFour,
    [Popup.name]: Popup,
    [Icon.name]: Icon
  },
  mixins: [mixins],
  provide() {
    return {
      leafSubmit: this.leafSubmit
    }
  },
  props: {
    option: {
      type: Object,
      default: () => {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      componentList: [styleOne, styleTwo, styleThree, styleFour],
      ids: [''],
      defaultOption: {
        name: 'name',
        value: 'id',
        parentId: 'parentId',
        icon: 'icon',
        children: 'children'
      },
      showMore: false,
      moreData: [],
      defaultList: [
        {
          id: 'Z1255695424096497666',
          classifyType: 'JNZQFL08',
          isAppVisit: '0',
          classifyName: '中工电台',
          parentId: '-1',
          ptressIds: 'Z1255695424096497666',
          ptressIdsValue: '中工电台',
          sort: 6,
          status: 'ZT01',
          children: [
            {
              id: 'Ze188cb24962595bde81d21e2b552e8fc',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '榜样力量',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Ze188cb24962595bde81d21e2b552e8fc',
              ptressIdsValue: '中工电台/榜样力量',
              sort: 9,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Ze12510ffb403e48fabdf5710029a39fe',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '生产管理',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Ze12510ffb403e48fabdf5710029a39fe',
              ptressIdsValue: '中工电台/生产管理',
              sort: 8,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Z21aa440abfca12a8d8a9e70e05456e87',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '大国工匠',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Z21aa440abfca12a8d8a9e70e05456e87',
              ptressIdsValue: '中工电台/大国工匠',
              sort: 7,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Z73e1c42d5040bbf7188e233eaab4ba72',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '法律法规',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Z73e1c42d5040bbf7188e233eaab4ba72',
              ptressIdsValue: '中工电台/法律法规',
              sort: 6,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Z5da274e6aef3f298cdfa6c059115167f',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '行业技术',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Z5da274e6aef3f298cdfa6c059115167f',
              ptressIdsValue: '中工电台/行业技术',
              sort: 5,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Zffe3336a49d37c0b643ef5316271ca25',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '思想政治引领',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Zffe3336a49d37c0b643ef5316271ca25',
              ptressIdsValue: '中工电台/思想政治引领',
              sort: 4,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Zc49a1bc6a2083e710705dfd1ee84f8c5',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '职场技能',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Zc49a1bc6a2083e710705dfd1ee84f8c5',
              ptressIdsValue: '中工电台/职场技能',
              sort: 3,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Zf2e49b2bed7a942e39cfe61d1bce6f4d',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '主题党课',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Zf2e49b2bed7a942e39cfe61d1bce6f4d',
              ptressIdsValue: '中工电台/主题党课',
              sort: 2,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            },
            {
              id: 'Z6447074430e872cb1732978c04a4dbcb',
              classifyType: 'JNZQFL08',
              isAppVisit: '1',
              classifyName: '时政热点',
              parentId: 'Z1255695424096497666',
              ptressIds:
                'Z1255695424096497666,Z6447074430e872cb1732978c04a4dbcb',
              ptressIdsValue: '中工电台/时政热点',
              sort: 1,
              status: 'ZT01',
              children: [],
              bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
            }
          ],
          bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
        }
      ],
      data: [],
      currentId: ''
    }
  },
  computed: {
    componentName() {
      return this.componentList[Number(this.option.style) - 1]
    },
    titleActiveColor() {
      return this.option.titleActiveColor
    },
    titleInactiveColor() {
      return this.option.titleInactiveColor
    },
    bgColor() {
      return this.option.bgColor
    },
    color() {
      return this.option.color
    },
    list() {
      const filterList = (listArr, count = 1) => {
        const res = []
        listArr.forEach((item) => {
          const tmp = {
            id: item.id,
            parentId: item[this.defaultOption.parentId],
            name: item[this.defaultOption.name],
            value: item[this.defaultOption.value],
            icon: item[this.defaultOption.icon] || null,
            children: item[this.defaultOption.children] || [],
            level: count,
            leaf: true
          }
          if (tmp.children && tmp.children.length > 0) {
            tmp.leaf = false
            tmp.children = [
              { ...allItem, level: count + 1, parentId: tmp.id },
              ...filterList(tmp.children, count + 1)
            ]
          }
          res.push(tmp)
        })

        return (res && res) || []
      }

      const allItem = {
        name: '全部',
        value: '',
        level: 1,
        leaf: true
      }
      const data = [allItem, ...filterList(this.data)]
      return data
    }
  },
  watch: {
    showMore() {
      this.$refs.outsideTabs.resize()
    }
  },
  async created() {
    const { name, parentId, value, icon, children } = this.option
    Object.assign(this.defaultOption, { name, parentId, value, icon, children })
    if (this.isInitData) {
      await this.initData()
    } else {
      this.data = this.defaultList
    }
  },
  methods: {
    setData(res) {
      const { data } = res.dataList
      console.log('data', data)
      this.data = data
    },
    handleClick(name, title) {
      const children =
        (this.list.find((item) => item.value === name) &&
          this.list.find((item) => item.value === name).children) ||
        []
      if (children.length > 0) {
        this.moreData = children
        this.showMore = true
      } else {
        this.ids = [name]
        this.leafSubmit(this.ids, title)
      }
    },
    leafSubmit(ids) {
      this.showMore = false
      const nids = ids.length > 1 ? ids.filter((item) => item !== '') : ids
      // this.$emit('input', nids[nids.length - 1])
      // this.$emit('submit')
      this.currentId = nids[nids.length - 1]
      this.dispatch_event('filed-value-change', this)
    },
    getContainer() {
      return document.querySelector('.four-class-wrap')
    },
    getValue() {
      const { ids, currentId } = this
      return { ids, currentId }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.four-class-wrap {
  position: relative;
  // top: rem(88);
  // left: 0;
  // right: 0;
  height: 100%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  & > .van-tabs {
    flex: 1;
  }
  .van-tabs__nav {
    background-color: transparent;
  }
  .icon-close {
    width: rem(60);
    height: rem(88);
    font-size: rem(40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.four-level-class-more-popup {
  position: absolute;
  top: rem(88);
  // left: 0;
  // right: 0;
  // bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100vh;
  max-height: none;
  .more-class-content {
    height: 100%;
    & > .four-class-one {
      background-color: #fff;
      border-bottom: 1px solid #eeeeee;

      padding: 0 rem(30);
    }
    & > .four-class-two {
      background-color: #fff;

      border-radius: 0 0 rem(25) rem(25);
      overflow: hidden;
    }
    & > .four-class-three {
      overflow: hidden;
    }
    & > .four-class-four {
      background-color: #fff;
      overflow: hidden;
    }
  }
}
</style>
